<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <div v-if="crud.props.searchToggle">
        <el-row :gutter="10">
          <el-form
            ref="elForm"
            :model="query"
            size="mini"
            label-width="125px"
            label-position="right"
          >
          <el-col :span="24">
              <el-row>
                <el-col :span="8">
                  <label class="el-form-item-label">所属公司</label>
                  <el-select
                    v-model="query.companyIds"
                    clearable
                    placeholder="选择案件所属公司"
                    style="width: 185px;"
                    class="filter-item"
                    multiple
                    filterable
                    @keyup.enter.native="crud.toQuery"
                  >
                    <el-option
                      v-for="(item, index) in companyIdOptions"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <label class="el-form-item-label">所属站点</label>
                  <el-cascader
                    v-model="query.companySiteIds"
                    :options="companySiteIdOptions"
                    :props="siteProps"
                    placeholder="请选择公司站点"
                    separator=","
                    filterable
                    clearable
                    :show-all-levels="false"
                  />
                </el-col>
                <el-col :span="8">
                  <label class="el-form-item-label">报案号</label>
                  <el-input
                    v-model="query.reportNo"
                    clearable
                    placeholder="报案号"
                    style="width: 185px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
                  />
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-row>
                <el-col :span="16">
                  <label class="el-form-item-label">出险时间</label>
                  <date-range-picker
                    v-model="query.accidentDate"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    class="date-item"
                  />
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">理赔员</label>
                  <el-select
                    v-model="query.responsibleUserIds"
                    clearable
                    placeholder="理赔员"
                    style="width: 185px;"
                    class="filter-item"
                    multiple
                    filterable
                    @keyup.enter.native="crud.toQuery"
                  >
                    <el-option
                      v-for="(item, index) in responsibleUserIdOptions"
                      :key="index"
                      :label="item.nickName"
                      :value="item.id"
                      :disabled="item.disabled"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
          </el-form>
        </el-row>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" >
        <template v-slot:right>
           <el-button type="warning" class="filter-item" size="mini" v-if="checkPer(['admin', 'case:changeUser'])"
           :disabled="crud.selections.length === 0"
           @click="batchUpdateResponsibleUser(crud.selections)"
           >更换理赔员</el-button>
        </template>
      </crudOperation>
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="理赔员" prop="responsibleUserId">
                  <el-select
                    v-model="form.responsibleUserId"
                    placeholder="请选择理赔员"
                    filterable
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in responsibleUserIdOptions"
                      :key="index"
                      :label="item.nickName"
                      :value="item.id"
                      :disabled="item.disabled"
                    />
                  </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="changeUser(crud.form)">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="false" prop="id" label="id" />
        <el-table-column prop="reportNo" label="报案号" width="100" />
        <!-- <el-table-column prop="createTime" label="创建日期" /> -->
        <el-table-column prop="userName" label="出险人" />
        <el-table-column prop="userMobile" label="骑手手机" />
        <!-- <el-table-column prop="userIdCard" label="骑手身份证" /> -->
        <el-table-column prop="accidentDate" label="出险时间" />
        <el-table-column prop="caseStatusDesc" label="案件状态" width="80" />
        <el-table-column prop="retentionTime" label="滞留时间" />
        <el-table-column prop="companyName" label="所属公司" />
        <el-table-column prop="companySiteName" label="所属公司站点" />
        <el-table-column prop="siteUserName" label="站长姓名" />
        <el-table-column prop="siteUserMobile" label="站长手机" />
        <el-table-column prop="responsibleUserName" label="理赔员" />
        <!-- <el-table-column prop="lastUpdateTime" label="最后更改时间" />
        <el-table-column prop="lastUpdateId" label="最后操作人" /> -->
        <!-- <el-table-column prop="claimType" label="理赔对象" />
        <el-table-column prop="responsibilityIds" label="责任判断ids" />
        <el-table-column prop="additional" label="有无附加险" />
        <el-table-column prop="accidentTypeIds" label="出险类型" />
        <el-table-column prop="accidentRegionCode" label="事故区域code" />
        <el-table-column prop="accidentAddress" label="事故地址" />
        <el-table-column prop="accidentDesc" label="事故说明" />
        <el-table-column prop="caseStatus" label="案件状态" />
        <el-table-column prop="mainInsuredCompensationAmount" label="主险赔付金额" />
        <el-table-column prop="additionalMainInsuredCompensationAmount" label="附加险赔付金额" />
        <el-table-column prop="otherAmount" label="其他金额" /> -->
        <el-table-column
          v-if="checkPer(['admin', 'case:edit', 'case:add','case:handler'])"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button v-if="(checkPer(['admin', 'case:edit'])) || checkPer(['case:edit:super'])" type="text" size="mini" @click="toEdit(scope.row.id)">修改信息</el-button>
            <el-button v-if="scope.row.handler && checkPer(['admin', 'case:handler'])" type="text" size="mini" @click="toHandler(scope.row.id)">处理案件</el-button>
            <!-- <el-button v-if="checkPer(['admin', 'case:changeUser'])" type="text" size="mini" @click="crud.toEdit(scope.row)">更换理赔员</el-button> -->
            <udOperation :data="scope.row" :permission="permission" :disabledDle="true" :disabledEdit="true"/>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudInsuredApply from '@/api/insurance/case'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
import aredData from '../../../data/ared.json'
import { getTree } from '@/api/system/dept'
import { getAll } from '@/api/system/user'
const defaultForm = {
  id: null,
  createUserId: null,
  isDeleted: null,
  createTime: null,
  lastUpdateTime: null,
  lastUpdateId: null,
  insuredUserId: null,
  companyId: null,
  companySiteId: null,
  siteUserName: null,
  siteUserMobile: null,
  reportNo: null,
  policyNo: null,
  userName: null,
  userMobile: null,
  userIdCard: null,
  claimType: null,
  responsibilityIds: null,
  additional: null,
  caseSpeek: null,
  accidentDate: null,
  accidentTypeIds: null,
  accidentRegionCode: null,
  accidentAddress: null,
  accidentDesc: null,
  responsibleUserId: null,
  caseStatus: null,
  mainInsuredCompensationAmount: null,
  additionalMainInsuredCompensationAmount: null,
  otherAmount: null
}
export default {
  name: 'CaseStaffList',
  components: { pagination, crudOperation, udOperation, rrOperation, DateRangePicker },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '案件列表',
      url: 'api/insured-apply',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: { ...crudInsuredApply },
      params: { caseSpeeks: [1, 2, 3, 4, 5], lt: new Date().getTime() },
      optShow: {
        add: false,
        edit: false,
        del: false,
        reset: true
      }
    })
  },
  data() {
    return {
      defaultParams: {},
      aredData,
      companyIdOptions: [],
      companySiteIdOptions: [],
      permission: {
        add: ['admin', 'insuredApply:add'],
        edit: ['admin', 'insuredApply:edit'],
        del: ['admin', 'insuredApply:del']
      },
      rules: {
        responsibleUserId: [
          { required: true, message: '理赔员不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'companyIds', display_name: '案件所属公司' },
        { key: 'companySiteIds', display_name: '案件所属公司站点' },
        { key: 'siteUserName', display_name: '站长姓名' },
        { key: 'siteUserMobile', display_name: '站长手机' },
        { key: 'reportNo', display_name: '报案号' },
        { key: 'policyNo', display_name: '保单号' },
        { key: 'userName', display_name: '骑手名称' },
        { key: 'userMobile', display_name: '出险人手机号码' },
        { key: 'userIdCard', display_name: '骑手身份证' },
        { key: 'claimTypes', display_name: '理赔对象' },
        { key: 'responsibilityIds', display_name: '责任判断ids' },
        { key: 'additional', display_name: '有无附加险' },
        { key: 'caseSpeeks', display_name: '案件状态' },
        { key: 'accidentTypeIds', display_name: '出险类型' },
        { key: 'accidentRegionCode', display_name: '事故区域code' },
        { key: 'responsibleUserIds', display_name: '理赔员' }
      ],
      accidentRegionCodeProps: {
        multiple: false,
        label: 'label',
        value: 'value',
        children: 'children',
        checkStrictly: false
      },
      siteProps: {
        multiple: true,
        label: 'label',
        value: 'id',
        children: 'children',
        checkStrictly: false,
        emitPath: false
      },
      responsibleUserIdOptions: [],
      accidentTypeIdsOptions: [
        {
          label: '自身受伤',
          value: 1
        },
        {
          label: '三者受伤',
          value: 2
        },
        {
          label: '三者物损',
          value: 3
        }
      ],
      responsibilityIdsOptions: [
        {
          label: '全责',
          value: 1
        },
        {
          label: '主责',
          value: 2
        },
        {
          label: '次责',
          value: 3
        },
        {
          label: '五五责',
          value: 4
        },
        {
          label: '无责',
          value: 5
        },
        {
          label: '摔伤',
          value: 6
        }
      ],
      additionalOptions: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ],
      caseStatusOptions: [
        {
          label: '待处理',
          value: 0
        },
        {
          label: '赔理分配',
          value: 1
        },
        {
          label: '系统报案',
          value: 2
        },
        {
          label: '资料收集',
          value: 3
        },
        {
          label: '保险公司定损',
          value: 4
        },
        {
          label: '诉讼',
          value: 5
        },
        {
          label: '协议文件',
          value: 6
        },
        {
          label: '公司盖章',
          value: 7
        },
        {
          label: '待打款',
          value: 10
        },
        {
          label: '结案',
          value: 20
        }
      ],
      batchUpdateResponsibleUserIds: []
    }
  },
  created() {
    getTree().then(res => {
      this.companyIdOptions = res
      this.companySiteIdOptions = res
    })
    getAll({ job: '理赔员' }).then(res => {
      if (res != null) {
        this.responsibleUserIdOptions = res
      }
    })
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    toEdit(id) {
      const deitRouter = this.$router.resolve({ path: '/insurance/edit', query: { id: id }})
      window.open(deitRouter.href, '_blank')
    },
    toHandler(id) {
      const handlerRouter = this.$router.resolve({ path: '/insurance/handler', query: { id: id }})
      window.open(handlerRouter.href, '_blank')
    },
    changeUser(data) {
      if (this.batchUpdateResponsibleUserIds.length > 0) {
        data.ids = this.batchUpdateResponsibleUserIds
      } else {
        data.ids = data.id
      }
      this.crud.status.edit = 2
      crudInsuredApply.updateUser(data).then(() => {
        this.crud.status.edit = 0
        this.crud.editSuccessNotify()
        this.crud.resetForm()
        this.crud.refresh()
        this.batchUpdateResponsibleUserIds = []
      }).catch(() => {
        this.crud.status.edit = 2
      })
    },
    batchUpdateResponsibleUser(data) {
      this.batchUpdateResponsibleUserIds = data.map(item => item.id)
      this.crud.status.edit = 1
    }
  }
}
</script>

<style scoped></style>
